<template>
  <div class="page-content">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/profile" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">关于我们</h1>
      </div>
    </header>
    
    <main class="container mx-auto px-4 mt-4">
      <!-- 应用信息 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6 text-center">
        <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-gavel text-white text-3xl"></i>
        </div>
        <h2 class="text-xl font-bold mb-2">要素式诉状小程序</h2>
        <p class="text-gray-600 mb-4">专业的法律文书智能生成工具</p>
        <div class="flex items-center justify-center space-x-4 text-sm text-gray-500">
          <span>版本号：v1.0.0</span>
          <span>|</span>
          <span>更新时间：2024-01-15</span>
        </div>
      </div>
      
      <!-- 功能介绍 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">功能介绍</h2>
        </div>
        <div class="p-4 space-y-4">
          <div class="flex items-start">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-exchange-alt text-blue-600 text-sm"></i>
            </div>
            <div>
              <h3 class="font-medium">诉状转换</h3>
              <p class="text-sm text-gray-600">将传统诉状格式智能转换为要素式诉状，提高文书规范性</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-file-alt text-green-600 text-sm"></i>
            </div>
            <div>
              <h3 class="font-medium">诉状生成</h3>
              <p class="text-sm text-gray-600">基于案件要素智能生成标准化的诉状文书</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-shield-alt text-purple-600 text-sm"></i>
            </div>
            <div>
              <h3 class="font-medium">答辩状生成</h3>
              <p class="text-sm text-gray-600">快速生成专业的答辩状，提高诉讼效率</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-copy text-orange-600 text-sm"></i>
            </div>
            <div>
              <h3 class="font-medium">模板库</h3>
              <p class="text-sm text-gray-600">丰富的法律文书模板，覆盖各类案件类型</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 技术特色 -->
      <!-- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">技术特色</h2>
        </div>
        <div class="p-4">
          <div class="grid grid-cols-2 gap-4">
            <div class="text-center p-4 bg-gray-50 rounded-lg">
              <i class="fas fa-brain text-blue-600 text-2xl mb-2"></i>
              <h3 class="font-medium text-sm">AI智能识别</h3>
              <p class="text-xs text-gray-600">深度学习算法</p>
            </div>
            <div class="text-center p-4 bg-gray-50 rounded-lg">
              <i class="fas fa-shield-alt text-green-600 text-2xl mb-2"></i>
              <h3 class="font-medium text-sm">数据安全</h3>
              <p class="text-xs text-gray-600">端到端加密</p>
            </div>
            <div class="text-center p-4 bg-gray-50 rounded-lg">
              <i class="fas fa-bolt text-purple-600 text-2xl mb-2"></i>
              <h3 class="font-medium text-sm">快速处理</h3>
              <p class="text-xs text-gray-600">秒级响应</p>
            </div>
            <div class="text-center p-4 bg-gray-50 rounded-lg">
              <i class="fas fa-mobile-alt text-orange-600 text-2xl mb-2"></i>
              <h3 class="font-medium text-sm">移动优先</h3>
              <p class="text-xs text-gray-600">随时随地使用</p>
            </div>
          </div>
        </div>
      </div> -->
       
      <!-- 联系我们 -->
      <!-- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">联系我们</h2>
        </div>
        <div class="p-4 space-y-4">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
              <i class="fas fa-envelope text-blue-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">邮箱</h3>
              <p class="text-sm text-gray-600">contact@example.com</p>
            </div>
            <button @click="copyEmail" class="text-blue-600 hover:text-blue-800">
              <i class="fas fa-copy"></i>
            </button>
          </div>
          <div class="flex items-center">
            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
              <i class="fas fa-phone text-green-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">电话</h3>
              <p class="text-sm text-gray-600">400-123-4567</p>
            </div>
            <button @click="callPhone" class="text-green-600 hover:text-green-800">
              <i class="fas fa-phone"></i>
            </button>
          </div>
          <div class="flex items-center">
            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
              <i class="fas fa-map-marker-alt text-purple-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">地址</h3>
              <p class="text-sm text-gray-600">北京市朝阳区xxx大厦</p>
            </div>
          </div>
          <div class="flex items-center">
            <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
              <i class="fab fa-weixin text-orange-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">微信公众号</h3>
              <p class="text-sm text-gray-600">要素式诉状助手</p>
            </div>
            <button @click="showQRCode" class="text-orange-600 hover:text-orange-800">
              <i class="fas fa-qrcode"></i>
            </button>
          </div>
        </div>
      </div> -->
      
      <!-- 版权信息 -->
      <!-- <div class="bg-white rounded-xl shadow-md p-4 mb-6 text-center">
        <p class="text-sm text-gray-600 mb-2">© 2024 要素式诉状小程序</p>
        <p class="text-xs text-gray-500">保留所有权利 | 京ICP备12345678号</p>
      </div> -->
      
      <!-- 操作按钮 -->
      <!-- <div class="space-y-3 mb-6">
        <button @click="checkUpdate" class="w-full px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          <i class="fas fa-sync-alt mr-2"></i>检查更新
        </button>
        <button @click="shareApp" class="w-full px-4 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50">
          <i class="fas fa-share mr-2"></i>分享应用
        </button>
      </div> -->
    </main>
  </div>
</template>

<script>
export default {
  name: 'About',
  methods: {
    copyEmail() {
      navigator.clipboard.writeText('contact@example.com').then(() => {
        alert('邮箱已复制到剪贴板')
      })
    },
    callPhone() {
      window.open('tel:400-123-4567')
    },
    showQRCode() {
      alert('请扫描二维码关注微信公众号')
    },
    checkUpdate() {
      console.log('检查更新')
      alert('当前已是最新版本')
    },
    shareApp() {
      console.log('分享应用')
      if (navigator.share) {
        navigator.share({
          title: '要素式诉状小程序',
          text: '专业的法律文书智能生成工具',
          url: window.location.origin
        })
      } else {
        alert('分享功能需要系统支持')
      }
    }
  }
}
</script> 